<template>
  <div class="tableData">
    <div class="unStructured">
      <el-table
        :data="unStructured.list"
        stripe
        :header-cell-style="tableHeaderColor"
        :cell-style="rowClass"
        max-height="420"
      >
        <el-table-column prop="unit" label="数据采集单位"> </el-table-column>
        <el-table-column prop="number" label="采集数量"> </el-table-column>
        <el-table-column prop="updateFrequency" label="更新频度">
        </el-table-column>
        <el-table-column prop="integrity" label="完整性"> </el-table-column>
        <el-table-column prop="timeliness" label="时效性"> </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          layout="total,prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="unStructured.pageSize"
          :total="unStructured.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableData",
  props: {
    unStructured: {
      type: Object,
    },
  },
  data() {
    return {};
  },

  methods: {
    //设置表头行的样式
    tableHeaderColor() {
      return "background-color:transparent;color:#1682e6;text-align:center";
    },
    rowClass() {
      //表格数据居中显示
      return "text-align:center";
    },
    handleCurrentChange(val) {
      this.$emit("current2", val);
    },
  },
};
</script>

<style  lang="scss" scoped>
.unStructured {
  height: 100%;
  flex-grow: 1;
}
.tableData {
  flex: 1;
  display: flex;
  flex-direction: column;
  .unStructured {
    flex: 1;
    .el-table {
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}
.block {
  position: absolute;
  bottom: 5px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 8px auto;
}
</style>